<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
       <!-- <button v-on:click="counter++">+</button>
        <button v-on:click="counter&#45;&#45;">-</button>-->
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const obj = {
            //代理（proxy），VUE将obj中的内容代理到了app中，使得app中的函数能够使用obj中的变量，具体的实现过程，参照响应式原理的具体代码
            //无论是修改app中的counter还是obj中的counter ,counter值都会改变
            counter:0,
            message:'abc'
        }

        const app = new Vue({
            el:'#app',
            data:{
                counter:0,
            },
            //定义方法，可以定义很多个方法
            methods:{
                add:function () {
                    //可以写成app.data  但是请不要这么做
                    //this.counter指的是当前这个const app中的数据，是一个局部数据
                    this.counter++;
                    console.log('add被执行');
                },
                sub:function () {
                    this.counter--;
                    console.log('sub被执行');
                }
            }
        })

        //以前的命令式做法：
        //1.拿到button的元素
        //2.添加监听事件
    </script>
</body>
</html>